<template>
  <div class="tab_container">
    <ul class="ul">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="active == index ? 'curr' : 'cur'"
        @click="add(index)"
      >
        {{ item.txt }}
      </li>
    </ul>
    <div class="item">
      <Applist :list="listAll" />
    </div>
  </div>
</template>
<script>
import Applist from "./applist";
export default {
  data() {
    return {
      list: [
        { txt: "全部", type: "all" },
        { txt: "精华", type: "a" },
        { txt: "分享", type: "share" },
        { txt: "问答", type: "ask" },
        { txt: "招聘", type: "a" },
        { txt: "客户端测试", type: "a" },
      ],
      active: 0,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
      listAll: [],
    };
  },
  mounted() {
    this.$axios.get("list.json").then((res) => {
      this.listAll = res.data.data;
    });
  },
  components: {
    Applist,
  },
  methods: {
    add(index) {
      this.active = index;
      this.$axios.get("list.json").then((res) => {
        console.log(res);
        if (this.list[index].type == "all") {
          this.listAll = res.data.data;
          return;
        }
        this.listAll = res.data.data.filter((item) => {
          if (item.tab == this.list[index].type) {
            return item;
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tab_container {
  width: 100%;
  height: 1rem;
  background: gainsboro;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      padding: 0.1rem;
      border-radius: 0.1rem;
      &.cur {
        color: #80bd01;
        background: gainsboro;
      }
      &.curr {
        color: white;
        background: #80bd01;
      }
    }
  }
}
</style>